<template>
	<view class="main">
		<u-navbar title="个人信息" :autoBack="true" :placeholder="true" :titleStyle="state.titleStyle" :height="40"
			bgColor="#fff">
		</u-navbar>
		<view class="head" @click="chooseImage">
			<image :src="state.userInfo.avatar" class="img" mode=""></image>
			<image src="../../static/me_icon_tx_xg@2x.png" class="pop" mode=""></image>
			<text>修改</text>
		</view>
		<view class="line" @click="router('../user/modify',1)">
			<view class="left">
				昵称
			</view>
			<view class="right">
				<text>{{state.userInfo.nickname}}</text>
				<image src="../../static/me_shezhi_icon_more@2x.png" mode=""></image>
			</view>
		</view>
		<view class="line" @click="router('../user/modify',2)">
			<view class="left">
				更换密码
			</view>
			<view class="right">
				<image src="../../static/me_shezhi_icon_more@2x.png" mode=""></image>
			</view>
		</view>
		<view class="line" @click="router('../user/modify',3)">
			<view class="left">
				更换手机
			</view>
			<view class="right">
				<text>{{state.userInfo.mobile}}</text>
				<image src="../../static/me_shezhi_icon_more@2x.png" mode=""></image>
			</view>
		</view>
		<view class="line" @click="to_check">
			<view class="left">
				个人主页
			</view>
			<view class="right">
				<text style="color:#1BDDD0;" v-if="state.userInfo.fabu_id=='0'">完善个人主页</text>
				<image src="../../static/me_shezhi_icon_more@2x.png" mode=""></image>
			</view>
		</view>
		<view class="quit" @click="quit">
			退出登录
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
	} from 'vue';
	import sheep from '@/sheep';
	import {
		onLoad,onShow
	} from '@dcloudio/uni-app';
	const state = reactive({
		titleStyle: 'fontWeight:bold',
		finished:true,//已完善信息
		userInfo:{},
	})
	onShow(() => {
		getuserInfo()//个人信息
	});
	// onLoad((options) => {
	// 	getuserInfo()//个人信息
	// });
	// 上传图片
	function chooseImage(){
		uni.chooseImage({
		    count:1, //默认9
		    sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
		    sourceType: ["album", "camera"], //从相册选择
		    success: (res) => {
				// state.imagePath = res.tempFilePaths[0]	
				// state.preimagePath = res.tempFilePaths
		        uni.uploadFile({
		            url:'https://laiyu.1122334455.cn/api/common/upload', 
		            filePath: res.tempFilePaths[0],
		            name:'file',   
		            formData: {
		                token: uni.getStorageSync('token')
		            },
		            success:(res) => {
						var data = JSON.parse(res.data)
						if(data.code == 1){
							state.avatar=data.data.fullurl
							getXiu()
						}
						
		            },
		            fail: (err) => {
		                console.log('uploadImage fail', err);
		            }
		        });
		    },
		});
	}
	// 修改头像
	async function getXiu() {
		const {code,data,msg} = await sheep.$api.login.profile({
			token:uni.getStorageSync('token'),
			avatar:state.avatar,
		})
		if (code == 1) {
			getuserInfo()
		    uni.showToast({
		    	title: msg,
		    	icon: "none",
		    	mask: true,
		    	duration: 2000
		    })
		}
	}
	function router(path,data){
		uni.navigateTo({
			url:path+'?data='+data
		})
	}
	function to_check(){
		if(state.userInfo.fabu_id=='0'){
			uni.navigateTo({
				url:'../user/information?id='+state.userInfo.fabu_id+"&type=1"
			})
		}else{
			uni.navigateTo({
				url:'../user/homepage?id='+state.userInfo.fabu_id
			})
		}
	}
	// 个人信息
	async function getuserInfo() {
		const {code,data} = await sheep.$api.user.userInfo({
			token:uni.getStorageSync('token'),
		})
		if (code == 1) {
		   state.userInfo=data
		}
	}
	function quit(){
		uni.showModal({
			title: '退出',
			content:'确认退出登录？',
			cancelText:'取消',
			confirmText:'确认',
			confirmColor:'#1BDDD0',
			cancelColor:'#999',
			success: function(res) {
				if (res.confirm) {
					uni.clearStorage()
					console.log(uni.getStorageSync('token'), 'token是否清除')
					uni.showToast({
						title: '退出成功',
						icon: "none",
						mask: true,
						duration: 2000
					})
					setTimeout(function() {
						uni.reLaunch({
							url: '/pages/login/login'
						})
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		})
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
		height: 100%;
		width: 100%;

		.main {
			.head {
				height: 150rpx;
				width: 150rpx;
				position: relative;
				margin: 60rpx auto 40rpx;

				.img {
					height: 150rpx;
					width: 150rpx;
					border-radius: 50%;
				}

				.pop {
					position: absolute;
					z-index: 999;
					height: 150rpx;
					width: 150rpx;
					left: 0;
				}

				text {
					position: absolute;
					z-index: 999;
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #fff;
					top: 112rpx;
					white-space: nowrap;
					left: 35%;
				}
			}

			.line {
				padding: 36rpx 32rpx;
				display: flex;
				align-items: center;
				background-color: #fff;
				border-bottom: 2rpx solid #F5F5F5;
				justify-content: space-between;

				.left {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.right {
					display: flex;
					align-items: center;

					image {
						height: 48rpx;
						width: 48rpx;
					}
					text{
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #666666;
					}
				}
			}
			.quit{
				position: absolute;
				width: 92%;
				bottom: 48rpx;
				margin:0 4%;
				text-align: center;
				padding: 26rpx 0;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius:54rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #999999;
				border: 2rpx solid #999999;
			}
		}
	}
</style>